import React, { useEffect, useState } from "react";
import type { GetProp, TableProps } from "antd";
import { Button, Flex, Popconfirm, Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store";
import {
  get_sys_menus_list,
  select_menus_list,
  select_menus_loading,
  select_menus_search_params,
  set_is_show_menus_modal,
} from "@/store/slice/sysMenus";
import { formartDateEmpty } from "@/utils";
import { deleteSysMenusById } from "@/api/sys/sysMenus";
import { selectDict } from "@/store/slice/app";

type ColumnsType<T extends object> = GetProp<TableProps<T>, "columns">;

type dictOptType = {
  label: string;
  value: string;
};

const SysMenusTable: React.FC = () => {
  const columns: ColumnsType<SysMenuEntityType> = [
    {
      title: "菜单名称",
      dataIndex: "name",
      key: 'name',
    },
    {
      title: "菜单URL",
      dataIndex: "url",
      key: 'url',
    },
    {
      title: "权限编码",
      dataIndex: "permissions",
      key: 'permissions',
    },
    {
      title: "类型",
      dataIndex: "menuType",
      key: 'menuType',
      render: (text) => {
        const node = menuTypeOptions.find(
          (item: dictOptType) => item.value === text
        ) as dictOptType | undefined;
        return node?.label;
      },
    },
    {
      title: "菜单图标",
      dataIndex: "icon",
      key: 'icon',
    },
    {
      title: "状态",
      dataIndex: "status",
      key: 'status',
      render: (text) => {
        const node = statusOptions.find(
          (item: dictOptType) => item.value === text
        ) as dictOptType | undefined;
        return node?.label;
      },
    },

    {
      title: "排序号",
      dataIndex: "sort",
      key: 'sort',
    },
    {
      title: "创建时间",
      dataIndex: "createDate",
      key: "createDate",
      render: (text) => formartDateEmpty(text),
    },
    {
      title: "更新时间",
      dataIndex: "updateDate",
      key: "updateDate",
      render: (text) => formartDateEmpty(text),
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      align: "center",
      render: (text, record: SysMenuEntityType) => (
        <Flex gap="small" flex="flex" align="center" justify="center">
          <Button type="link" onClick={() => handleEditRowTable(record)}>
            编辑
          </Button>
          <Popconfirm
            title="是否确定删除当前数据?"
            okText="是"
            cancelText="否"
            onConfirm={() => handleDelRowTable(record)}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Flex>
      ),
    },
  ];
  const dispatch = useAppDispatch();
  const allDict = useAppSelector(selectDict);
  const tableLoading = useAppSelector(select_menus_loading);
  const pageList = useAppSelector(select_menus_list);
  const searchParams = useAppSelector(select_menus_search_params);
  const [menuTypeOptions, setMenuTypeOptions] = useState([]);
  const [statusOptions, setStatusOptions] = useState([]);

  useEffect(() => {
    dispatch(get_sys_menus_list({}));
  }, []);

  useEffect(() => {
    const sys_menu_type_options =
      allDict?.sys_menu_type?.map((item: SysDictDataEntity) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      }) || [];
    const sys_status_options =
      allDict?.sys_status?.map((item: SysDictDataEntity) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      }) || [];
    setMenuTypeOptions(sys_menu_type_options);
    setStatusOptions(sys_status_options);
  }, [allDict]);

  function handleEditRowTable(record: SysMenuEntityType) {
    dispatch(
      set_is_show_menus_modal({
        show: true,
        mode: 2,
        title: "编辑系统参数",
        data: record,
      })
    );
  }
  function handleDelRowTable(row: SysMenuEntityType) {
    deleteSysMenusById(row.id).then((res) => {
      if (res) {
        dispatch(get_sys_menus_list(searchParams));
      }
    });
  }
  return (
    <>
      <Table
        loading={tableLoading}
        size="small"
        rowKey="id"
        tableLayout="fixed"
        rowSelection={{}}
        columns={columns}
        dataSource={pageList}
        pagination={false}
      />
    </>
  );
};

export default SysMenusTable;
